<template>
  <div class="seller">
    <div class="top">
      <p class="title">发货国分析</p>

      <div class="btn">
        <span class="item" :class="showTable ? 'active' : ''" @click="showTable = true">表格</span>
        <span class="item" :class="!showTable ? 'active' : ''" @click="showTable = false">图表</span>
      </div>

    </div>
    <el-table
      v-show="showTable"
      :data="tableData"
      stripe
      style="width: 100%">
      <el-table-column
        prop="foreign_port_of_lading_country"
        label="公司名称">
      </el-table-column>
      <el-table-column
        prop="weight"
        label="重量（kg）">
      </el-table-column>
      <el-table-column
        prop="piece_count"
        label="件数">
      </el-table-column>
      <el-table-column
        prop="rate"
        label="占比">
      </el-table-column>
    </el-table>
    <div v-show="!showTable">
      <div id="countryChart" style="height: 500px;width: 1150px"></div>
    </div>
  </div>
</template>

<script>
    import { getUsaData } from '@/api/automation/customs'
    export default {
        name: "seller",
        data() {
            return {
                tableData:[],
                showTable:true,
                yArr:[],
                rateArr:[]
            }
        },
        methods: {
            init() {
                getUsaData(2).then(res => {
                    this.$emit('cancel')
                    this.tableData = res.data.data

                    // 计算发货国重量占比
                    let number = 0
                    this.tableData.forEach(value => {
                        number += value.weight
                    })

                    this.tableData.forEach(value => {
                        value.rate = (value.weight/ number).toFixed(2)
                    })

                    this.yArr = []
                    this.rateArr = []
                    this.tableData.forEach((item) => {
                        this.yArr.push(item.foreign_port_of_lading_country)
                        this.rateArr.push(item.rate)
                    })

                    this.drawLine()
                })
            },
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('countryChart'))
                // 绘制图表
                let options = {
                    color:['#2A97F9'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: this.yArr,
                        axisTick: {
                            alignWithLabel: true
                        },
                        offset:200,
                        axisLabel:{
                            formatter:function(val){
                                var strs = val.split(''); //字符串数组
                                var str = ''
                                for(var i = 0, s; s = strs[i++];) { //遍历字符串数组
                                    str += s;
                                    if(!(i % 21)) str += '\n'; //按需要求余
                                }
                                return str
                            },
                            align:'left',
                            interval:0,
                            margin:-40,
                            textStyle: {
                                align:'left',
                                baseline:'middle'
                            }
                        }
                    },
                    series: [
                        {
                            name: '重量占比', 	//'用户数',
                            barWidth: 30,		//设置柱子宽度
                            type: 'bar',
                            data: this.rateArr,
                        }
                    ]
                }
                myChart.setOption(options)

            }
        }
    }
</script>

<style scoped lang="scss">
  .seller{
    font-size: 13px;
    padding: 15px 25px;
    background-color: white;
    border-radius: 20px;
    margin-bottom: 20px;
  }
  .title{
    color: #2A97F9;
    font-size: 14px;
    font-weight: 600;
  }
  .top{
    display: flex;
    justify-content: space-between;
    padding-bottom: 14px;
  }
  .item{
    width: 80px;
    height: 25px;
    display: inline-block;
    color: #2A97F9;
    text-align: center;
    line-height: 25px;
    cursor: pointer;
  }
  .btn{
    border: 2px solid #2A97F9;
    border-radius: 10px;
    overflow: hidden;
  }
  .active{
    background-color: #2A97F9;
    color: white;
  }
</style>
